<template>
	<!--pages/views/tabBar/category.wxml-->
	<view class="category">
		<!-- 搜索 -->
		<view class="search">
			<search class="search_box"></search>
			<!-- <view class="hierarchy" @tap="onswitch">
				<text class="iconfont icon-erji" v-if="classLevel == true" :style="'font-size: 44upx;color:' + colors"></text>
				<text class="iconfont icon-sanji" v-if="classLevel == false" :style="'font-size: 44upx;color:' + colors"></text>
			</view> -->
		</view>
		<!-- 二级类型的分类菜单 -->
		/**
		* hideShow 显示销量与价格筛选条件
		*/
		<twostage :colors="colors" :current="currentTwo" :dataList="dataList" :classList="categoryList" v-if="classLevel == true"
		 :hideShow="false" @setTwo="setTwo"></twostage>
		<!-- 三级类型的分类菜单 -->
		<threestage :colors="colors" :current="currentThere" :classList="categoryList" :classData="classData" @setThere="setThere"
		 v-if="classLevel == false"></threestage>
	</view>
</template>

<script>
	var app = getApp();
	import goodsApi from '@/api/goods.js'
	import search from "../../commponent/public/search";
	import twostage from "../../commponent/cate/twostage";
	import threestage from "../../commponent/cate/threestage";

	export default {
		data() {
			return {
				classLevel: true, //控制显示分类菜单  true：二级分类菜单   false：三级分类菜单
				colors: "",
				current: "",
				scrollTop: "",
				categoryList: [],
				classData: [],
				// 二级菜单目录
				dataList: [],
				currentTwo: 0,
				currentThere: 0,
				activeClassifyId: ''
			};
		},

		components: {
			search,
			twostage,
			threestage
		},
		props: {},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: async function() {
			this.activeClassifyId = uni.getStorageSync('c_activeClassifyId')
			this.initCategory();
			this.setData({
				colors: app.globalData.newColor
			});
		},

		methods: {
			async initCategory() {
				await goodsApi.getClassify().then(res => {
					this.categoryList = res.data.data;
				})
				this.$nextTick(() => {
					if (this.activeClassifyId) {
						this.currentTwo = this.categoryList.findIndex(item => item._id === this.activeClassifyId);
						this.initGoodsList();
					}
				})
			},
			initGoodsList() {
				goodsApi.find({
					classify: this.categoryList[this.currentTwo].code
				}).then(res => {
					this.dataList = res.data.data;
				});
			},
			setCurrent(e) {
				//设置tab
				let index = e.currentTarget.dataset.index;
				let items = e.currentTarget.dataset.item;
				let scrollTop = index * 20;

				if (index <= 2) {
					scrollTop = 0;
				}

				this.setData({
					current: index,
					scrollTop: scrollTop
				});
			},
			onswitch() {
				this.setData({
					classLevel: !this.classLevel
				});
			},
			setThere(item) { //获取选择的三级tab
				console.log(item)
			},
			setTwo(item, index) { //获取选择的二级tab
				this.currentTwo = index;
				this.initGoodsList();
			}
		}
	};
</script>
<style scoped lang="scss">
	.category {
		background-color: #ffffff;
		position: fixed;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		top: 0;
		bottom: 0;
	}

	.search {
		padding: 10upx;
		padding-left: 10upx;
		background-color: #ffffff;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search_box {
		width: 100%;
	}

	.hierarchy {
		width: 10%;
		height: 60upx;
		font-size: 32upx;
		text-align: right;
	}
</style>
